<template>
	<view class="xb-page">
		<view class="page-segment">
			<SegmentedControl :values="tabs" :current="tabselect" activeColor="#0DC73A" styleType="button"></SegmentedControl>
		</view>
		<view>
			<swiper :current="swiperindex">
				<swiper-item>
					<view class="page-emp-list">
						<view @click="selectemp(index1)" v-for="(item,index1) in emplist" :key="index1" class="uni-flex uni-row page-emp-cell"
						 style="align-items: center;">
							<view>
								<image class="page-list-head" :src="item.headurl"></image>
							</view>
							<view class="page-emp-desc">
								<view class="page-emp-name">{{item.name}}</view>
								<view class="page-emp-tel">{{item.tel}}</view>
								<view>
									<uniTag v-for="(trule,index2) in item.rules" type="primary" size="small" :key="index2" :text="trule.name">
									</uniTag>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="page-emp-list">
						<view @click="selectemp(index1)" v-for="(item,index1) in emplist" :key="index1" class="uni-flex uni-row page-emp-cell"
						 style="align-items: center;">
							<view>
								<image class="page-list-head" :src="item.headurl"></image>
							</view>
							<view class="page-emp-desc">
								<view class="page-emp-name">{{item.name}}</view>
								<view class="page-emp-tel">{{item.tel}}</view>
								<view>
									<uniTag v-for="(trule,index2) in item.rules" type="primary" size="small" :key="index2" :text="trule.name">
									</uniTag>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import pageHead from '../../../components/page-head.vue';
	import uniTag from '../../../components/uni-tag.vue';
	import SegmentedControl from '../../../components/segmented-control.vue';
	export default {
		watch: {
			tabselect: function(val) {
				tabselect = val;
				this.swiperindex = val;
				initdata(tabselect);
			}
		},

		components: {
			SegmentedControl,
			pageHead,
			uniTag,
		},
		onPullDownRefresh() {

		},
		data() {
			return {
				formdata: {
					pageindex: 1,
					pagesize: 10,
				},
				emplist: [{
					'name': '哈老师',
					'headurl': '../../../static/head.png',
					'tel': '13111111111',
					'rules': [{
						'name': '学员'
					}, {
						'name': '合约'
					}]
				}, {
					'name': '哈老师',
					'headurl': '../../../static/head.png',
					'tel': '13111111111',
					'rules': [{
						'name': '学员'
					}, {
						'name': '合约'
					}]
				}],
				tabselect: 0,
				tabs: ['教务', '教学'],
				swiperindex: 0,

			}

		},
		methods: {
			selectemp: function(i) {
				var id = emplist[i].id;
				uni.navigateTo({
					url: 'empdetail' + id
				})

			},
			initdata: async function(tabindex) {
				uni.showNavigationBarLoading();
				const res = await queryemp(formdata);
				if (res.success == true) {
					uni.hideNavigationBarLoading();
					this.emplist = res.data.values;
				} else {
					uni.hideNavigationBarLoading();
				}

			}


		}
	}
</script>

<style scoped>
	@import "../../../common/uni.css";
	@import "../../../common/xb.css";

	.page-segment {
		width: 90%;
		margin-left: 5%;
	}

	.page-emp-desc {
		margin-left: 20px;
	}

	.page-list-head {
		width: 80px;
		height: 80px;
	}

	.page-emp-list {}

	.page-emp-cell {
		padding-top: 20px;
		padding-left: 50px;
		padding-right: 50px;
		background-color: #FFFFFF;

	}

	.page-emp-tel {
		font-size: 30px;
		color: #1AAD19;

	}

	.page-emp-name {
		color: #000000;
		font-size: 35px;


	}

	.page-emp-image {}

	. page-emp-rule {}
</style>
